<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员列表</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">

</head>

<body style="padding: 10px;">
    <div class="header">
        <div>
            <span class="layui-breadcrumb">
                <a>管理员管理</a>
                <a>管理员列表</a>
            </span>
        </div>
        <!-- 添加按钮 -->
        <div style="margin-top: 10px;">
            <button class="layui-btn layui-btn-sm" onclick="add()">
                <i class="layui-icon layui-icon-addition" style="font-size: 12px;"></i>添加
            </button>
        </div>
        <div style="border-bottom: solid 1px #009688;margin-top: 4px;"></div>
    </div>
    <!-- 数据表格 -->
    <table id="admin-list" lay-filter="test" class="layui-table">
        <thead>
            <tr style="background-color: #eee;">
                <th>ID</th>
                <th>用户名</th>
                <th>真实姓名</th>
                <th>角色</th>
                <th>状态</th>
                <th>添加时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            {volist name='admins' id='admin'}
            <tr>
                <td>{$admin.id}</td>
                <td>{$admin.username}</td>
                <td>{$admin.realname}</td>
                <td>{$admin.role.name}</td>
                <td>{$admin.status==1 ? '正常' : '<span class="color: red;">禁用</span>'}</td>
                <td>{$admin.create_time}</td>
                <td>
                    <!-- 编辑 -->
                    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" onclick="edit({$admin.id})">
                        <i class="layui-icon layui-icon-edit"></i>
                    </button>
                    <!-- 删除 -->
                    <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" onclick="del({$admin.id})">
                        <i class=" layui-icon layui-icon-delete"></i>
                    </button>
                </td>
            </tr>

            {/volist}

        </tbody>
    </table>


    <script src="/static/layui/layui.js"></script>
    <script>
        layui.use('layer', function () {
            layer = layui.layer;
            $ = layui.jquery;
        });

        // 添加管理员
        function add() {
            layer.open({
                type: 2,
                title: '添加管理员',
                shade: 0.3,
                area: ['480px', '400px'],
                content: '/admin/admin/add'
            });
        }

        // 编辑管理员
        function edit(id) {
            layer.open({
                type: 2,
                title: '编辑管理员',
                shade: 0.3,
                area: ['480px', '360px'],
                content: `/admin/admin/edit/${id}`
            });
        }

        // 删除管理员
        function del(id) {
            layer.confirm('确认删除吗?', { icon: 3, title: '提示' }, function (index) {
                $.ajax({
                    url: '/admin/admin/del',
                    type: 'delete',
                    async: true,
                    dataType: 'json',
                    data: { 'id': id },
                    success: function (res) {
                        if (res.code == '200') {
                            layer.msg('操作成功', {
                                icon: 6,
                                time: 500
                            }, function () {
                                window.location.reload();
                            });
                        } else {
                            layer.msg(res.msg, {
                                icon: 5,
                                time: 1000
                            });
                        }
                    }
                });

                layer.close(index);
            });
        }
    </script>
</body>

</html>